<template>
  <div class="container-xl">
    <div class="row">
      <div :style="{ width: '436px', marginRight: '24px' }">
        <div class="my-home-div" :style="{ width: '436px' }">
          <div class="my-home-div-line row">
            <div class="col">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-a-icon_team_PeopleTeam"></use>
              </svg>
              成员排行榜
            </div>
          </div>
          <el-skeleton v-show="skeleton" :rows="5" animated />
          <TeamrunkVue
            :style="{ '--font-size': '14px', '--bs-gutter-x': '0', '--bs-gutter-y': '0', padding: '12px', '--height': '48px' }"
            :Iteamdata="_teamdata" :show="[true, true, false, true]" :data="data">
          </TeamrunkVue>
        </div>
        <div class="my-home-div" :style="{ width: '436px' }">
          <div class="my-home-div-line row">
            <div class="col">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-a-icon_team_teamdata"></use>
              </svg>
              团队数据统计（近一年）
            </div>
          </div>
          <el-row :style="{ paddingRight: '12px', paddingBottom: '12px' }">
            <el-col :span="12">
              <div class="tongji">
                评测提交题目数：<MynumberVue :num="_teamdata.map(e => e.distinctquestionid).reduce((a = 0, b = 0) => a + b, 0)">
                </MynumberVue>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="tongji">
                评测提交次数：<MynumberVue :num="_teamdata.map(a => a.countlength).reduce((a = 0, b = 0) => a + b, 0)">
                </MynumberVue>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="tongji">
                全AC提交数：<MynumberVue :num="_teamdata.map(a => a.ACcount).reduce((a = 0, b = 0) => a + b, 0)">
                </MynumberVue>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="tongji">
                AC测试点数：<MynumberVue :num="_teamdata.map(a => a.resultdatacount).reduce((a = 0, b = 0) => a + b, 0)">
                </MynumberVue>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="col ">
        <div class="my-home-div">
          <div class="my-home-div-line row">
            <div class="col">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-icon_team_Megaphone"></use>
              </svg>
              团队公告
            </div>
          </div>
          <div class="text">
            {{ data?.info }}
          </div>
        </div>
        <div class="my-home-div">
          <div class="my-home-div-line row">
            <div class="col">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-a-icon_team_PeopleAudience"></use>
              </svg>
              团员动态
            </div>
          </div>
          <div class="text">
            <el-form size="default" :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item label="类型">
                <el-select v-model="formInline.type" placeholder="请选择类型">
                  <el-option v-for="(v, k) in logtype" :key="v" :label="v" :value="k"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="请选择团员">
                <el-select v-model="formInline.userid" filterable placeholder="请选择团员">
                  <el-option v-for="(v, k) in selectv2" :key="k" :label="v.label" :value="Number(v.value)"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="">
                <el-button class="sele" type="primary" @click="_offset = 0; start();
                ">查询</el-button>
              </el-form-item>
            </el-form>
            <el-skeleton v-show="skeleton" :rows="10" animated />

            <el-container class="text-z" v-for="(item, keys) in mydata" :key="`${keys}-${keys}`">
              <el-aside width="55px" class="imag">
                <router-link v-slot="{ navigate }" custom :to="{
                  name: '用户',
                  query: { userid: item.user?.ID },
                }">
                  <el-avatar size="default" @click="navigate" class="cu" :src="item.user?.headportrait"></el-avatar>
                </router-link>
              </el-aside>
              <el-main class="p-0">
                <header class="row m-0">
                  <router-link v-slot="{ navigate }" custom :to="{
                    name: '用户',
                    query: { userid: item.user?.ID },
                  }">
                    <div class="col p-0 username cu" @click="navigate" v-text="item.user?.name"></div>
                  </router-link>
                  <div class="col text-right text-sm-right p-0" style="width: 180px" v-text="TimeYH(item.createdAt)">
                  </div>
                </header>
                <div class="text-html editor-content-view" @click="click(item.href)" v-html="item.context"></div>
              </el-main>
            </el-container>
            <div class="text-right">
              <el-pagination :page-size="_limit" :total="count" @current-change="change" layout="prev, pager, next"
                :current-page="Math.floor(_offset / _limit) + 1"></el-pagination>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { asyncselectteamuserdata, asyncranking } from "../../../api";
import Studycodemodel from "../../../mysql_interface/studycodemodel";
import { mapObject } from "underscore";
import {
  computed,
  onMounted,
  reactive,
  ref,
  toRefs,
  watch,
} from "vue";
import { useRouter } from "vue-router";
import TeamrunkVue from '../../../components/team/rank.vue'
import { TimeYH } from "../../../util/time";
import MynumberVue from "../../../components/animejs/mynumber.vue"
import { assign } from 'lodash-es';

const p = defineProps<{ data?: Studycodemodel.Iteam, isAdmin?: number, user?: Studycodemodel.Iuser, teamusers?: Studycodemodel.Iteamuser[] }>()

const { data } = toRefs(p);
const formInline = reactive({
  type: 0,
  userid: 0,
});

const skeleton = ref(true)

const router = useRouter();
const _teamdata = ref<{ ID?: number, name?: string, ACcount?: number, df?: number, headportrait?: string, distinctquestionid?: number, countlength?: number, resultdatacount?: number }[]>([])
const users = computed<Studycodemodel.Iuser[]>(() => {
  const t: Studycodemodel.Iuser[] = [];
  p.teamusers?.forEach((v) => {
    if (v.jurisdiction === "0" && v.user && v.isAdmin === 0 && v.userid !== p.data?.userid) {
      t.push(v.user);
    }
  });
  return t;
});

async function _teamdatastart() {
  try {
    const t = await asyncranking({ teamid: p.data?.ID, formdate: new Date(Date.now() - 1000 * 60 * 60 * 24 * 365), todate: new Date })
    _teamdata.value = t.ACrank.map(e => {
      const user = t.user.find(z => z.ID === e.userid)
      return {
        ...user,
        ACcount: e.count,
        df: Math.floor(Number(e.resultdataarrlength) / Number(e.resultdataarraclength) * 100),
        ...e
      }
    })
  } catch (e) {
    // ElMessage.error('没有查询')
  }
}

const logtype = [
  "提交评测",
  "报名比赛",
  "完成比赛",
  "发表评论",
  "创建题单",
  "创建题目",
];

const context = ref("");
const count = ref(0);
const selectv2 = computed<{ value?: string | number; label?: string }[]>(
  () => {
    const data = users.value.map((e) => {
      return {
        value: e.ID,
        label: e.name,
      };
    });
    const t: { value?: string | number; label?: string }[] = [
      { value: 0, label: "全部团员" },
    ];
    return t.concat(data);
  }
);

const mydata = ref<
  { context?: string; createdAt?: Date; user?: Studycodemodel.Iuser }[]
>([]);
const _like = ref("");
const _limit = ref(10);
const _offset = ref(0);

watch([_limit, _offset, _like, users], start);

async function start() {
  if (data?.value?.ID) {
    const body = {
      _limit: _limit.value,
      _offset: _offset.value,
      userid: formInline.userid
        ? formInline.userid
        : users.value.map((e) => e.ID),
      _type: formInline.type,
      _order: "createdAt",
      teamid: p.data?.ID
    };
    let e = {} as any;
    mapObject(body, (v, k) => {
      if (v !== null) {
        e[k] = v;
      }
    });
    const d = await asyncselectteamuserdata<any>(e);
    if (Array.isArray(d.count)) {
      count.value = d.count.length;
    } else {
      count.value = d.count;
    }
    mydata.value = d.rows.map((e) => {
      const { createdAt, user, href } = e;
      const context: string | undefined = e["name"] ? e.name : e.context;
      return {
        createdAt,
        user,
        context,
        href,
      };
    });
    context.value = data.value.info || "";
    _teamdatastart()
  }
}

onMounted(() => {
  skeleton.value = true
  start().then(() => {
    skeleton.value = false
  })
});
function change(r: number) {
  if (r < 1) {
    r = 1;
  }
  _offset.value = (r - 1) * _limit.value;
}


function click(str: string) {
  router.push(str);
}

</script>

<style scoped>
.main-info {
  background: #f5f5f5;
  border: 1px solid #f5f5f5;
  box-sizing: border-box;
  border-radius: 2px;
}

.container-xl,
.row {
  --bs-gutter-x: 0
}

.text {
  padding: 12px;
  white-space: pre-wrap;
}

.sele {
  background-color: var(--color-cheng);
  color: #fff;
}

.demo-form-inline {
  margin-top: 15px;
}

.demo-form-inline .el-form-item {
  margin-right: 24px !important;
}

.text-html {
  cursor: pointer;
  height: 29px;
  align-items: flex-end;
  display: flex;
  line-height: 29px;
  overflow: hidden;
}

.text-html:hover {
  color: var(--color-cheng);

}

.el-asider {
  border-top-left-radius: 2px;
  border-end-start-radius: 2px;
  overflow: hidden;
}

.text-z {
  font-size: 14px;
  height: 64px;
  background: #FCFCFC;
  /* Layer_line */

  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 2px;
  padding: 6px 12px;
  margin-bottom: 12px;
  color: var(--color-43);
}

.tongji {
  height: 60px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  line-height: 58px;
  padding-left: 12px;
  margin-top: 12px;
  margin-left: 12px;
  border-radius: 4px;
  background-color: #FCFCFC;
  font-size: 14px;
}
</style>